<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .container{
        display: grid;
        grid-template-rows: repeat(3, 100px);
        grid-template-columns: repeat(3, 100px);
        grid-template-areas: 
            "a a b"
            "c d b"
            "c d e";

        /* 如果某些区域不需要利用，则使用点（.）表示 */
        /* grid-template-areas:
            "a . . b"
            "c . . d"
            "e . . f"; */
        /* gap: 10px; */
    }

    .container .item:nth-child(1){
        grid-area: a;
        background-color: skyblue;
    }

    .container .item:nth-child(2){
        grid-area: b;
        background-color: pink;
    }

    .container .item:nth-child(3){
        grid-area: c;
        background-color: khaki;
    }

    .container .item:nth-child(4){
        grid-area: d;
        background-color: lightgreen;
    }

    .container .item:nth-child(5){
        grid-area: e;
        background-color: lightcoral;
    }

    /* .container .item:nth-child(odd){
        background-color: skyblue;
    }

    .container .item:nth-child(even){
        background-color: pink;
    } */
</style>
<body>
    <!-- 
        TIP
        grid-template-areas 属性用于指定网格区域，一个区域由单个或多个单元格组成。
        这个属性需要配合项目属性grid-area一起来使用
        grid-area属性用于指定 Grid 项目放在哪一个区域。
        grid-area后的值为区域名
    -->

    <div class="container">
        <div class="item">区域a</div>
        <div class="item">区域b</div>
        <div class="item">区域c</div>
        <div class="item">区域d</div>
        <div class="item">区域e</div>
    </div>
</body>
</html>